<template>
	<div style="padding: 10px;">
		<div ref="barmapDiv" style="width: 100%; height: 100%;"></div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { ListProvince } from "@/api/screen/province.js";
import mapJson from '../assets/MapData/china.json'

const barmapDiv = ref(null)
onMounted(async () => {
	//注册地图
	echarts.registerMap('china', mapJson)
	await renderChart()
})

async function renderChart() {
	const response = (await ListProvince()).data;
	// console.log(response,"map地图")

	const dataList = response.map((item) => ({
		name: item.provinceName,
		value: item.provinceSize
	}))
	// console.log(dataList)

	const option = {
		// backgroundColor: '#142037',
		//位置
		tooltip: {
			trigger: "axis"
		},
		grid: {
			right: '0%',
			top: '15%',
			bottom: '5%',
			width: '20%'
		},
		geo: {
			show: true,
			map: 'china',
			roam: true,
			zoom: 1,//地图大小
			center: [118, 37],//地图位置
			itemStyle: {
				normal: {
					//边框颜色
					borderColor: 'rgba(147,235,248,1)',
					borderWidth: 1,
					areaColor: {
						//径向渐变
						type: 'radial',
						// x: 0.5,
						// y: 0.5,
						// r: 0.5,
						//区域图颜色
						colorStops: [
							{
								offset: 0,
								color: 'rgb(147,235,248,0.2)'
							},
							{
								offset: 1,
								color: 'rgb(147,235,248,.2)'
							}
						]
					},

				},
				emphasis: {
					areaColor: '#389BB7',
					borderWidth: 0
				},

			},
			// 添加 label 配置用于显示文字
			label: {
				show: true,
				// 文字的字体样式等设置
				textStyle: {
					color: 'white',
					fontSize: 12
				},
			}

		},
		title: [
			{
				text: "全国省份图",
				left: '1%',
				top: '4%',
				textStyle: {
					color: '#ccc',
					fontSize: 30
				}
			},
			{
				id: 'statistic',
				text: '省份招聘人数统计',
				right: '5%',
				top: '4%',
				textStyle: {
					color: '#ccc',
					fontSize: 20
				}
			}
		],
		xAxis: {
			type: 'value',
			//脱离零刻度
			scale: true,
			position: 'top',
			// show: false,
			//间隔值
			interval: 5000,
			splitLine: {
				show: false
			},
			//不显示轴线
			axisLine: {
				show: false
			},
			//不显示刻度
			axisTick: {
				show: false
			},
			axisLabel: {
				margin: 2,
				textStyle: {
					color: '#aaa'
				}
			}
		},
		yAxis: {
			type: 'category',
			//轴线
			axisLine: {
				show: true,
				lineSytle: {
					color: '#ddd'
				}
			},
			//刻度尺
			axisTick: {
				show: false
			},
			//标签
			axisLabel: {
				interval: 0,
				textStyle: {
					color: '#ddd'
				}
			},
			data: dataList.map(item => item.name)
		},
		series: [
			{
				type: 'bar',
				zlevel: 1.5,
				data: dataList.map(item => item.value)
			},
			// {
			// 	type: 'effectScatter',
			// 	//将坐标定位到 map 地图上
			// 	coordinateSystem: 'geo',
			// 	data: dataList
			// }
		]
	}
	const optionMap = {

	}

	echarts.init(barmapDiv.value).setOption(option)
}
</script>

<style></style>